L = require('leaflet@1.2.0')

// Include Leaflet CSS and custom legend CSS
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`

html`
<style>
.info.legend {
  line-height: 18px;
  color: #555;
  background: white;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
  padding: 10px;
}
.info.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}
</style>
`

color_scale = d3.scaleSequential(t => d3.interpolateMagma(1 - t))
  .domain([1, 6]);



// Create the map with filtered data
map = {
  // Calculate dimensions based on card width
  let width = 850; // Prilagodite širinu kartice prema potrebi
  let height = width / 1.6; // Omjer širine i visine za kartu

  // Create the container for the map
  let container = DOM.element('div', {
    style: `width: ${width}px; height: ${height}px`
  });
  yield container;

   let map = L.map(container).setView([44.4, 16.4], 7);
  L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  filtered_quakes.forEach(d => {
    L.circleMarker([d.lat, d.lon], {
      radius: d3.scaleLinear().domain([1, 6]).range([1, 6])(d.mag),
      fillColor: color_scale(d.mag),
      color: "#000",
      weight: 1,
      opacity: 1,
      fillOpacity: 0.5
    }).addTo(map)
      .bindPopup(`
        Date: ${d.date_only}<br/>
        Time: ${d.time_only}<br/>
        Magnitude: ${d.mag.toFixed(2)}<br/>
        Depth: ${d.depth} km<br/>
        Location: ${d.place}
      `);
  });

  // Add legend to the map
  var legend = L.control({position: 'bottomleft'});
  legend.onAdd = function (map) {
    var div = L.DomUtil.create('div', 'info legend'),
      grades = [1, 2, 3, 4, 5,6],
      labels = [];
      
      div.innerHTML += '<strong>Magnitude</strong><br>';

    // Loop through intervals to generate labels with a colored square for each interval
   for (var i = 0; i < grades.length; i++) {
    var label = grades[i];
    if (label === 6) {
      label = '6+';
    }
    div.innerHTML +=
       '<i style="background:' + color_scale(grades[i]) + '"></i> '+
      label + '<br>';
  }

    return div;
  };
  legend.addTo(map);

  return map;
}

viewof table = Inputs.table(filtered_quakes, {
  columns: [
    "date_only",
    "time_only",
    "mag",
    "depth",
    "place"
  ],
  header: {
    date_only: "Date",
    time_only: "Time",
    mag: "Magnitude",
    depth: "Depth",
    place: "Location"
  },
  width: {
   date_only: 150,
    time_only: 100,
    mag: 80,
    depth: 80,
    place: 150
  },
  format: {
    depth: x => Number.isInteger(x) ? x.toString() : x.toFixed(2)
  },
  rows: Infinity, 
  pagination: true
})


html`<style>
table {
  table-layout: auto;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  color: #5A5555;
  border-bottom: 1px solid #ddd;
  font-family: Baskerville;
  font-weight: bold;
}

td {
  border-bottom: 1px solid #ddd;
  word-wrap: break-word;
  font-family: Montserrat;
  color: #5A5555;
}
table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:hover {
  background-color: #D5C3C3;
}
</style>`